<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:ic="http://ivyteam.ch/jsf/component"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui/extensions"
	xmlns:pm="http://primefaces.org/mobile">

<h:head>
	<title>#{ivy.cms.co('/axonactive/vision/training/pageTitleTeacher')}</title>
	<h:outputScript library="ivy-webcontent"
		name="WEB-INF/resource/common.js" />
	<h:outputScript library="ivy-webcontent"
		name="WEB-INF/resource/dataTable.js" />
</h:head>
<h:body>
	<h:form id="frmExam">
		<p:layout fullPage="true">
			<p:layoutUnit position="north">
				<h:graphicImage library="ivy-webcontent"
					name="WEB-INF/resource/logo.gif" style="float:left;" />
				<p:outputPanel id="userInfo" style="float:right;">
					<p:panelGrid columns="3">
						<p:outputLabel value="Name"></p:outputLabel>
						<p:outputLabel value="#{data.fullname}"></p:outputLabel>
						<p:commandLink value="(log out)" actionListener="#{logic.logout}"></p:commandLink>
						<p:outputLabel value="Role"></p:outputLabel>
						<p:outputLabel value="#{data.role}"></p:outputLabel>
						<p:outputLabel value=""></p:outputLabel>
					</p:panelGrid>
				</p:outputPanel>
			</p:layoutUnit>
			<p:layoutUnit position="west">
				<p:outputPanel>
					<p:commandButton id="btnComposeExam" value="Compose"
						rendered="#{data.isShowCompose == 'true'}"
						actionListener="#{logic.composeExam}"
						update=":#{p:component('editingExamDialog')}"></p:commandButton>
				</p:outputPanel>
				<p:outputPanel id="listExam">
					<p:selectOneListbox value="#{data.selectedExam}"
						converter="entityConverter" rendered="#{not empty data.listExams}">
						<f:selectItems value="#{data.listExams}" var="exam"
							itemLabel="#{exam.title}" itemValue="#{exam}"></f:selectItems>
						<p:ajax event="change" listener="#{logic.selectExam}"
							update=":#{p:component('Exam')}"></p:ajax>
					</p:selectOneListbox>
					<p:outputLabel
						value="#{ivy.cms.co('/axonactive/vision/training/msgNoExam')}"
						rendered="#{empty data.listExams}"></p:outputLabel>
				</p:outputPanel>
			</p:layoutUnit>
			<p:layoutUnit position="center">
				<p:outputPanel>
					<p:commandButton value="Edit" actionListener="#{logic.editExam}"
						update=":#{p:component('editingExamDialog')}"></p:commandButton>
					<p:commandButton id="btnDeleteExam" value="Delete"
						actionListener="#{logic.removeExam}"
						update=":#{p:component('Exam')}, :#{p:component('listExam')}"></p:commandButton>
				</p:outputPanel>
				<p:outputPanel id="Exam">
					<p:outputPanel id="ExamHeader" style="margin-bottom:10px;">
						<p:outputLabel value="#{data.selectedExam.title}"></p:outputLabel>
					</p:outputPanel>
					<p:outputPanel id="ExamContent">
						<ui:repeat var="p" value="#{data.listQuestionDTO}" step="1"
							varStatus="Status">
							<p:outputLabel value="#{Status.index + 1}"></p:outputLabel>
							<p:outputLabel value="#{p.question.question}"></p:outputLabel>
							<p:selectOneRadio value="#{p.selectedRadio}"
								rendered="#{p.question.type=='Single choice'}"
								layout="pageDirection" disabled="true">
								<f:selectItem itemValue="A" itemLabel="#{p.question.ans1}" />
								<f:selectItem itemValue="B" itemLabel="#{p.question.ans2}" />
								<f:selectItem itemValue="C" itemLabel="#{p.question.ans3}" />
								<f:selectItem itemValue="D" itemLabel="#{p.question.ans4}" />
							</p:selectOneRadio>
							<p:selectManyCheckbox value="#{p.listSelectedCheckBox}"
								rendered="#{p.question.type=='Multiple choice'}"
								layout="pageDirection" disabled="true">
								<f:selectItem itemValue="A" itemLabel="#{p.question.ans1}" />
								<f:selectItem itemValue="B" itemLabel="#{p.question.ans2}" />
								<f:selectItem itemValue="C" itemLabel="#{p.question.ans3}" />
								<f:selectItem itemValue="D" itemLabel="#{p.question.ans4}" />
							</p:selectManyCheckbox>
						</ui:repeat>
					</p:outputPanel>
				</p:outputPanel>
			</p:layoutUnit>
		</p:layout>
	</h:form>
	<ui:include src="EditingExam.xhtml"></ui:include>
	<ui:include src="EditingQuestion.xhtml"></ui:include>

	<p:ajaxStatus onstart="PF('statusDialog').show()"
		onsuccess="PF('statusDialog').hide()" />

	<p:dialog widgetVar="statusDialog" modal="true" draggable="false"
		closable="false" resizable="false" showHeader="false">
		<p:graphicImage library="ivy-webcontent"
			name="WEB-INF/resource/loading.gif" />
	</p:dialog>

</h:body>
</html>